<template>
  <GridPage title="招聘职位信息管理" size="full">
    <n-card class="mt-12">
      <n-data-table
        :bordered="false"
        :columns="tableColumns"
        :data="jobPosting"
        max-height="350px"
        :pagination="pagination"
      />
    </n-card>
  </GridPage>
  <MeModal
    ref="modalRef"
    title="招聘职位信息详情"
    width="800px"
    :showCancel="false"
    :showOk="false"
  >
    <n-scrollbar style="max-height: 500px">
      <n-card embedded>
        <n-h1>{{ display.title }}</n-h1>
        <div>
          <n-text class="mr-10">{{ address }}</n-text>
          |
          <n-text class="mr-10 ml-10">{{ education_requirement }}</n-text>
          |
          <n-text class="ml-10">{{ type }}</n-text>
        </div>
      </n-card>
      <n-card class="mt-12" embedded>
        <n-h4>招聘详情</n-h4>
        <div>公司名称：{{ display.company_name }}</div>
        <div class="mt-5">职位类型：{{ job_name }}</div>
        <div class="mt-5">月薪范围：{{ display.salary_min }} - {{ display.salary_max }}k</div>
      </n-card>
      <n-card class="mt-12" embedded>
        <n-h4>职位描述</n-h4>
        <p v-for="descs in descriptions">{{ descs }}</p>
      </n-card>
    </n-scrollbar>
  </MeModal>
</template>

<script setup>
import { NTag, NButton } from 'naive-ui'
import { MeModal, GridPage } from '@/components'
import { useModal } from '@/composables'
import recruiterApi from '@/api/recruiter'
import { useRecruiterStore } from '@/store/modules/recruiter'
import { getJobName, getCity } from '@/data'
const recruiterStore = useRecruiterStore()

const tableColumns = ref([
  {
    title: '职位名称',
    key: 'title',
    align: 'center',
    width: '190px',
  },
  {
    title: '职位类型',
    key: 'job_code',
    align: 'center',
    width: '120px',
    render(row) {
      return getJobName(row.job_code)
    },
  },
  {
    title: '工作类型',
    key: 'type',
    align: 'center',
    width: '85px',
    render(row) {
      return typeOps[row.type].label
    },
  },
  {
    title: '工作地点',
    key: 'address_code',
    align: 'center',
    width: '120px',
    render(row) {
      return getCity(row.address_code)
    },
  },
  {
    title: '月薪',
    key: 'salary',
    align: 'center',
    width: '120px',
    render(row) {
      return row.salary_min + 'k - ' + row.salary_max + 'k'
    },
  },
  {
    title: '学历要求',
    key: 'edu_requirement',
    align: 'center',
    width: '90px',
    render(row) {
      return degreeOps[row.education_requirement].label
    },
  },
  {
    title: '状态',
    key: 'audit_state',
    align: 'center',
    width: '90px',
    render(row) {
      const obj = audit_state[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: obj.type,
          bordered: false,
        },
        {
          default: () => obj.label,
        }
      )
    },
    filterOptions: [
      {
        label: '有效',
        value: 1,
      },
      {
        label: '已撤销',
        value: 3,
      },
    ],
    filter(value, row) {
      return row.state === value
    },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: '140px',
    render(row) {
      return [
        h(
          NButton,
          {
            secondary: true,
            type: 'info',
            class: 'mr-5',
            onClick: () => handleDetail(row),
          },
          { default: () => '详情' }
        ),
        h(
          NButton,
          {
            secondary: true,
            type: 'error',
            disabled: row.state !== 1,
            onClick: () => handleDelete(row),
          },
          { default: () => '撤销' }
        ),
      ]
    },
  },
])
const jobPosting = ref([])

const pagination = {
  pageSize: 5,
}

//显示详情的职位信息对象
const display = ref({})

let address = computed(() => {
  return getCity(display.value.address_code)
})

let job_name = computed(() => {
  return getJobName(display.value.job_code)
})

let type = computed(() => {
  return typeOps[display.value.type].label
})

let education_requirement = computed(() => {
  return degreeOps[display.value.education_requirement].label
})

let descriptions = computed(() => {
  return display.value.job_description.split(/[\r\n]+/)
})

const audit_state = [
  { type: 'warning', label: '审核中' },
  { type: 'success', label: '有效' },
  { type: 'error', label: '未通过' },
  { type: 'error', label: '已撤销' },
]

const degreeOps = [
  { value: 0, label: '中专/中技' },
  { value: 1, label: '大专' },
  { value: 2, label: '本科' },
  { value: 3, label: '硕士' },
  { value: 4, label: 'MBA/EMBA' },
  { value: 5, label: '博士' },
  { value: 6, label: '学历不限' },
]

const typeOps = [
  { value: 0, label: '实习' },
  { value: 1, label: '应届' },
  { value: 2, label: '全职' },
  { value: 3, label: '兼职' },
]

//打开确认删除对话框
function handleDelete(jp) {
  $dialog.error({
    title: '确定撤销',
    content: '是否撤销该招聘信息？该操作不可撤销！',
    positiveText: '确认',
    negativeText: '取消',
    async onPositiveClick() {
      await recruiterApi.deleteJobPosting(jp.job_id)
      $message.success('撤销成功')
      const job_obj = jobPosting.value.find((e) => e.job_id === jp.job_id)
      jobPosting.value.pop(job_obj)
    },
  })
}

const [modalRef] = useModal()

//打开查看详情对话框
function handleDetail(row) {
  const value = display.value
  value.job_id = row.job_id
  value.title = row.title
  value.company_name = row.company_name
  value.job_code = row.job_code
  value.type = row.type
  value.address_code = row.address_code
  value.salary_min = row.salary_min.toString()
  value.salary_max = row.salary_max.toString()
  value.education_requirement = row.education_requirement
  value.job_description = row.job_description
  modalRef.value.open()
}

onMounted(async () => {
  // await recruiterStore.getRecruiter()
  const { data } = await recruiterApi.getRecruiterAuditedJobPosting(
    recruiterStore.recruiter.recruiter_id
  )
  if (data) {
    jobPosting.value = data
  }
})
</script>
